<template>
	<view class="global">
		<view>
			<view style="padding-left: 5px;">
				<uni-section title="会议主题">
					<template v-slot:right>
						<text class="Text">{{meetFormData.theme}}</text>
					</template>
				</uni-section>
			</view>
			<view style="padding-left: 5px;">
				<uni-section title="发起人">
					<template v-slot:right>
						<text class="Text">{{meetFormData.authorPhone}}</text>
					</template>
				</uni-section>
			</view>
			<view>
				<uni-collapse>
					<uni-collapse-item title="参会人">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-h">
							<view class="cu-list menu-avatar">
								<view class="cu-item" v-for="(item,index) in participants" :key="index">
									<view class="cu-avatar">
										<image style="width: 60px; height: 40px; border-radius: 10%;"
											:src="item.avatar">
										</image>
									</view>
									<view class="content">
										<view class="text-pink">
											<view class="text-cut">{{item.name}}</view>
										</view>
										<view class="text-gray text-sm flex">
											<view class="text-cut">{{item.phone}}</view>
										</view>
									</view>
									<view class="action">
										<view class="text-grey text-xs">{{item.role}}</view>
										<view class="cu-tag round bg-red sm">{{item.deptName}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view v-if="isSignFlag">
				<uni-collapse>
					<uni-collapse-item title="签到数">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-h">
							<view class="cu-list menu-avatar">
								<view class="cu-item" v-for="(item,index) in signUsers" :key="index">
									<view class="cu-avatar">
										<image style="width: 60px; height: 40px; border-radius: 10%;"
											:src="item.avatar">
										</image>
									</view>
									<view class="content">
										<view class="text-pink">
											<view class="text-cut">{{item.name}}</view>
										</view>
										<view class="text-gray text-sm flex">
											<view class="text-cut">{{item.phone}}</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view style="padding-left: 5px;">
				<uni-section title="会议室">
					<template v-slot:right>
						<text class="Text">{{meetFormData.roomName}}</text>
					</template>
				</uni-section>
			</view>
			<view style="padding-left: 5px;">
				<uni-section title="会议状态">
					<template v-slot:right>
						<text class="Text">{{meetFormData.status}}</text>
					</template>
				</uni-section>
			</view>
			<view style="padding-left: 5px;">
				<uni-section title="会议时间">
					<template v-slot:right>
						<text class="Text">{{meetFormData.beginTime}}</text>
					</template>
				</uni-section>
			</view>
			<view style="padding-left: 5px;">
				<uni-section title="备注">
					<template v-slot:right>
						<text class="Text">{{meetFormData.remark}}</text>
					</template>
				</uni-section>
			</view>
		</view>
		<view v-if="isBelongOneSlef" style="margin-top: 30px;">
			<view style="display: flex;">
				<button @click="cancelMeet(id)"
					style=" color: white; backgroundColor: #e54d42; height: 40px; width: 100px;">取消会议</button>
				<button @click="extendMeet(id)"
					style=" color: white; backgroundColor: #39b54a ; height: 40px; width: 100px;">延长会议</button>
			</view>
		</view>
		<view v-if="signFlag" style="margin-top: 30px;">
			<button @click="sign(id,courrentPhone)"
				style=" color: white; backgroundColor: #0081ff ; height: 40px; width: 100px;">点击签到</button>
		</view>
		<view>
			<uni-popup background-color="white" ref="popup" type="dialog">
				<uni-popup-dialog title="延长会议" mode="input" :before-close="true" @close="close" @confirm="confirm">
					<view name="length">
						<uni-forms ref="valiForm" :border="true" :rules="rules" :modelValue="RsAddLengthVo">
							<uni-forms-item label="时长" name="length">
								<uni-easyinput trim="all" :inputBorder="false" type="number"
									v-model="RsAddLengthVo.length" placeholder="单位:分钟" />
							</uni-forms-item>
						</uni-forms>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		detail,
		cancelMeeting,
		addLength,
		getParticipant
	} from '@/api/reservation.js';
	import {
		getSignUser,
		userToSign
	} from "@/api/sign.js";
	import {share} from '@/utils/share.js';

	//会议预约数据及提交
	const meetFormData = ref({});
	const participants = ref({});
	const id = ref(null);
	//签到人
	const signUsers = ref({});
	//是否是会议发起人
	const isBelongOneSlef = ref(false);
	const signFlag = ref(true);
	const isSignFlag = ref(false);
	const courrentPhone = ref('');
	onLoad(async (option) => {
		share();
		await detail(option.id).then(res => {
			if (res.code === 200) {
				meetFormData.value = res.data;
			}
		});
		id.value = option.id;
		await getParticipant(option.id).then(res => {
			if (res.code === 200) {
				participants.value = res.data;
			}
		});
		const userInfo = uni.getStorageSync('user');
		courrentPhone.value = userInfo.phone;
		if (meetFormData.value.authorPhone === userInfo.phone) {
			signFlag.value = false;
			isBelongOneSlef.value = true;
			isSignFlag.value = true;
		};
		if (meetFormData.value.status === '已结束') {
			isBelongOneSlef.value = false;
			signFlag.value = false;
		};
		await getSignUser(option.id).then(res => {
			if (res.code === 200) {
				signUsers.value = res.data;
			}
		});
	});

	//下拉刷新请求数据
	onPullDownRefresh(() => {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	});
	//取消会议
	function cancelMeet(id) {
		console.log(id);
		uni.showModal({
			title: '提示',
			content: '是否确认取消',
			success: (res) => {
				if (res.confirm) {
					//做取消操作
					cancelMeeting(id).then(res => {
						if (res.code === 200) {
							uni.showModal({
								content: '取消成功！',
								success: (res) => {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}
								}
							})
						}
					})
				}
			}
		})
	};


	//Form表单校验
	const valiForm = ref(null);
	const rules = ref({
		length: {
			rules: [{
				required: true,
				errorMessage: '时长不能为空'
			}, {
				format: 'number',
				errorMessage: '时长只能输入数字'
			}]
		}
	});
	//延长会议
	const popup = ref(null);
	const RsAddLengthVo = ref({
		id: null,
		length: null
	})

	function extendMeet(id) {
		popup.value.open('center');
		RsAddLengthVo.value.id = id;
	}

	function close() {
		popup.value.close();
		RsAddLengthVo.value.length = null;
	};

	function confirm() {
		valiForm.value.validate((valid) => {
			if (!valid) {
				addLength(RsAddLengthVo.value).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '延长成功',
							icon: 'success'
						});
						popup.value.close();
						RsAddLengthVo.value.length = null;
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/myReservation/myReservation'
							})
						}, 300)
					}
				});
			}
		})
	};

	const scrollTop = ref(0);

	function sign(id, phone) {
		userToSign(id,phone).then(res => {
			if(res.code === 200){
				uni.showToast({
					title: '签到成功！',
					icon: 'success'
				})
			}
		})
	};
</script>

<style scoped lang="scss">
	.global {
		background-color: #F5F5F5;
		height: 100vh;
	}

	.Text {
		color: #A9A9A9;
		font-size: 14px;
	}

	.content {
		padding: 15px;
	}

	.scroll-h {
		height: 100px;
	}
</style>